<template>
 <div class="statistice">
			<h1>{{ msg }} 卫生室门诊登记</h1>
      <!-- {{$store.state.count}} -->
			<div class="clearfix">

				<div class="fl">
					<p> 门诊号:<span class="red">4</span>患者ID:<span class="red">{{huozheid}}</span>就诊时间:<span class="red">{{time}}</span></p>
					<p><label for="">姓名：</label><search  @searchList="getzuo"></search><i class="red">*</i>
					<label for="">性别：</label>
						<select v-model="selected">
    <option v-for="opt in options" v-bind:value="opt.value">{{opt.text}}</option>
  </select>
						<label for="">年龄：</label><input class="small_input" type="text" v-model="age"></p>
					<p><label for="">住址：</label><input type="text"  v-model="site"><label for="">电话：</label><input type="text"  v-model="phone"></p>
					 <p><label for="">农合证号：</label><input type="text"  v-model="card"></p>
					<p class="historylist mid_tit">病例详细记录</p>
					<p>
						<label for="">温度：</label><input v-model="wendu" class="small_input" type="text">°C
						<label for="">心率：</label><input v-model="xinlv" class="small_input" type="text">次/分
						<label for="">血压：</label><input v-model="xuegao" class="small_input" type="text">/
						<input class="small_input" type="text" v-model="xuedi">mmHg
					</p>
					<div class="fist_yes">
						<label for="">初步诊断：</label><input type="text" v-model="firstyes"><i class="red">*</i>
						<ul>
							<li>感冒</li>
						</ul>
					</div>
					<div class="left_table">
						<table>
							<thead>
								<th>门诊号</th>
								<th>姓名</th>
								<th>就诊时间</th>
								<th>临床诊断</th>
							</thead>
							<tbody>
								<tr v-for="(item,index) in histor">
									<td>{{index+1}}</td>
									<td>{{item.patient_name}}</td>
									<td>{{item.time}}</td>
									<td>{{item.symptom}}</td>
								</tr>
							</tbody>
						</table>

					</div>
				</div>
				<div class="dj_fr fl">
					<p>
						<label for="">药品名称：</label><input type="text" v-model="yaodes.name">
						<label for="">用药：</label><cfdrug  @searchyao="getzuoyao"></cfdrug>
					</p>
					<p>
						<label for="">生产厂家：</label><input type="text"  v-model="yaodes.supplier">
						<label for="">用法用量：</label>
          <select v-model="selectedyf"  class="yongfa">
               

                <option v-for="test in tests" v-bind:value="test.text">{{test.text}}</option>
          </select>
					
					<select v-model="selectedyl"  class="yongfa">
               

                <option v-for="test in yllist" v-bind:value="test.text">{{test.text}}</option>
          </select>
				
						<!-- {{yaodes.unit}} -->

						<!-- <input type="text" class="small_input" v-model="yaodes.unit"> -->

					</p>
					<p>
						<label for="">规格：</label><input type="text"  class="small_input" v-model="yaodes.specification">
						<label for=""  style="width:50px;">单位：</label><input type="text"  class="small_input" v-model="yaodes.unit">
						<label for=""  style="width:98px;">数量：</label><input type="text" @keyup="slfun"  class="small_input" v-model="yaodes.shuliang">

					</p>
					<p>
						<label for="">现有库存：</label><input  v-model="yaodes.num" class="small_input" type="text">
						<label for="" style="width:50px;">单价：</label><input  v-model="yaodes.price" class="small_input" type="text">
						<!-- <button class="btn" style="margin-left:80px;">修改库存</button> -->
						<button @click="addchufang" class="btn" style="margin-left:80px;">
                    添加到处方
                  </button>
					</p>
					<p class="mid_tit clearfix">姓名：{{name}}<span class="smallf" v-if="selected==1">性别：男</span><span  class="smallf" v-else>性别：女</span> <span  class="smallf">年龄：{{age}}岁 </span> <b>{{firstyes}}</b> <span class="fr">就诊时间：{{time}}</span></p>
					<div class="left_table right_table">
						<table>
							<thead>
								<th>药品名称</th>
								<th>规格</th>
								<th>数量</th>
								<th>单位</th>
								<th>单价</th>
								<th>用法</th>
								<th>合计</th>
							</thead>
							<tbody>
								<tr v-for="item in chufang">
									<td>{{item.name}}</td>
									<td>{{item.specification}}</td>

									<td>{{item.shuliang}}</td>
									<td>{{item.unit}}</td>
									<td>{{item.price}}</td>
									<td>{{yfyl_computed}}</td>
									<td>{{item.shuliang*item.price}}</td>
								</tr>

							</tbody>
						</table>

					</div>
				</div>

			</div>
     <p class="heji_text">
       
       总计：￥<span class="red">{{zonji}}</span>
       <button class="btn">打印处方</button>
       <button class="btn" @click="savecase">保存病例</button>
     </p>
		</div>
</template>

<script>
var nowDate = new Date();
 var year = nowDate.getFullYear();
 var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
  : nowDate.getMonth() + 1;
 var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
  .getDate();
 var dateStr = year + "-" + month + "-" + day;
import search from "@/components/search";
import cfdrug from "@/components/cfdrug";
export default {
  name: "statistics",
  data() {
    return {
      time:dateStr,
      msg: "圣母玛利亚",
      xingming: "姓名",
      yongyao: "用药",
      zonji: 0,
      options: [{ text: "男", value: "1" }, { text: "女", value: "2" }],
      huozheid: "", //或者id
      name: "", //姓名
      age: "", //年龄
      selected: "1", //性别 1 是 男 2 是女
      site: "", //位置
      phone: "", //电话
      card: "", //农合证号
      histor: "", //看病历史记录
      wendu: "", //温度
      xinlv: "", //心率
      xuegao: "", //血高
      xuedi: "", //血低
      firstyes: "", //初步诊断
      yaodes: {
        name: "",
        supplier: "",
        specification: "",
        num: "", //库存
        price: "",
        unit: "",
        shuliang: "1",
        drug_warehouse_id: "",
        yfyl: ""
      },
      chufang: [],
      selectedyf: "口服",
      tests: [
        { value: 1, text: "口服" },
        { value: 2, text: "肌肉注射" },
        { value: 3, text: "灌肠" },
        { value: 4, text: "滴入" }
      ],
      selectedyl: "每日3次",
      yllist: [
        { value: 1, text: "每日3次" },
        { value: 2, text: "每日2次" },
        { value: 3, text: "每日1次" },
        { value: 4, text: "立即" }
      ]
    };
  },
  computed: {
    yfyl_computed() {
      return this.selectedyf + this.selectedyl;
    }
  },
  components: {
    search,
    cfdrug
  }
,
  methods: {
    slfun(ev) {
      console.log(ev.target.value);

      if (ev.target.value > this.yaodes.num) {
        this.$layer.msg("输入数量不能大于库存！", { time: 0.5 });
        return false;
      }
    },
    savecase() {
      // console.log(this.chufang);
      if (this.chufang == null) {
        this.$layer.msg("没有添加任何处方！");
        return;
      }

      if (this.name == "") {
        this.$layer.msg("姓名不能为空！");
        return;
      }
      if (this.firstyes == "") {
        this.$layer.msg("初步诊断不能为空！");
        return;
      }
      //单机保存病例
      //let params = new URLSearchParams();
      // params.append("patient_id", this.huozheid);
      // params.append("id", JSON.parse(localStorage.user).userid);
      // params.append("level", JSON.parse(localStorage.user).level);

      // params.append("name", this.name);
      // params.append("sex", this.selected);
      // params.append("age", this.age);
      // params.append("site", this.site);

      // params.append("phone", this.phone);
      // params.append("card", this.card);
      // params.append("temperature", this.wendu);
      // params.append("pulse", this.xinlv);
      // params.append("low_blood_pressure", this.xuedi);
      // params.append("high_blood_pressure", this.xuegao);
      // params.append("symptom", this.firstyes);
      // params.append("arr", JSON.stringify(this.chufang));
      this.$http
        .post(
          "http://medical.qingguo188.com/user-patient/addprescription",
          {
            patient_id: this.huozheid,
            id: JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level,

            name: this.name,
            sex: this.selected,
            age: this.age,
            site: this.site,

            phone: this.phone,
            card: this.card,
            temperature: this.wendu,
            pulse: this.xinlv,
            low_blood_pressure: this.xuedi,
            high_blood_pressure: this.xuegao,
            symptom: this.firstyes,
            arr: JSON.stringify(this.chufang)
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            console.log(rester.data.$message);
            if (rester.data.status == 1) {
              this.zonji = 0;//总计价格清空
              this.chufang=[];
               this.$layer.msg("添加成功!");
              this.$store.state.count = rester.data.$message;
              location.reload()
            } else {
              this.$layer.msg("添加失败！");
            }
          },
          function() {
            //this.$layer.alert("网络错误！");
          }
        );
    },
    addchufang() {
      //添加处方
      if (this.yaodes.name == "") {
        this.$layer.msg("药品信息不全");
        return false;
      }

      this.yaodes.yfyl = this.yfyl_computed;
      console.log(this.yfyl_computed);
      console.log(this.yaodes.yfyl);
      this.chufang.push(this.yaodes);
      console.log(this.chufang);
      var numberp = 0;
      for (let i = 0; i < this.chufang.length; i++) {
        //计算总价格
        // console.log(this.chufang[i].shuliang+"数量")
        //  console.log(this.chufang[i].price+"价格")
        numberp +=
          Number(this.chufang[i].shuliang) * Number(this.chufang[i].price);
      }

      this.zonji = numberp;
      this.yaodes = {
        name: "",
        supplier: "",
        specification: "",
        num: "",
        price: "",
        unit: "",
        shuliang: "1"
      };
    },
    getzuoyao(yao) {
      //获取要的信息
      console.log(yao);
      this.yaodes.name = yao.name;
      this.yaodes.supplier = yao.supplier;
      this.yaodes.specification = yao.specification;
      this.yaodes.num = yao.num;
      this.yaodes.price = yao.price;
      this.yaodes.drug_warehouse_id = yao.drug_warehouse_id;
      this.yaodes.unit = yao.specification.replace(/(\d+|\s+)/g, "");
    },
    getzuo(res) {
      //获取已有就诊的历史信息
      if (res.list) {
        console.log(res);
        this.histor = res.list; //获取就诊记录
        console.log(this.histor);
        this.name = res.patient.name;
        this.huozheid = res.patient.id;
        this.age = res.patient.age;
        this.selected = res.patient.sex;
        this.site = res.patient.site;
        this.phone = res.patient.phone;
        this.card = res.patient.card;
      } else {
        console.log(res + "----没有记录");
        this.name = res;
        this.huozheid = "";
        this.age = "";
        this.selected = "1";
        this.site = "";
        this.phone = "";
        this.card = "";
        this.histor = [];
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.smallf{
  font-size: 14px;
  margin-left: 5px;
}
p {
  margin-bottom: 10px;
}
h1 {
  font-size: 20px;
  color: #333333;
  display: block;
  margin-bottom: 20px;
  text-align: center;
}
.red {
  color: red;
  margin: 0 10px;
  font-size: 17px;
  vertical-align: middle;
}
.statistice {
  width: 1200px;
  margin: 0 auto;
}
label {
  display: inline-block;
  width: 80px;
  text-align: right;
  line-height: 30px;
}
.small_input {
  display: inline-block;
  width: 44px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #cccccc;
}
.dj_fr {
  float: right;
}
.big_select {
  height: 30px;
  line-height: 30px;
  width: 200px;
}
.fist_yes {
  margin-bottom: 20px;
  position: relative;
}
.fist_yes ul {
  position: absolute;
  right: 20px;
  width: 181px;
  text-align: center;
  height: 30px;
  background: #eeeeee;
  line-height: 30px;
  display: none;
}

.left_table table {
  width: 100%;
}
.left_table th,
.left_table td {
  height: 30px;
  border: 1px solid #cccccc;
  background: #eeeeee;
  line-height: 30px;
  text-align: center;
}
.left_table {
  height: 187px;
  /* overflow-y: auto; */
}
.yongfa {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  width: 88px;
  border: 1px solid #cccccc;
}

.heji_text {
  margin-top: 30px;
  text-align: center;
}
.heji_text .red {
  font-size: 20px;
}
.mid_tit {

  background: floralwhite;
  padding: 10px;
  margin: 20px 0 0 0;
  font-size: 16px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.historylist {
  margin-bottom: 10px;
}
.searchper {
  margin-left: 30px;
  padding: 5px 10px;
}
td {
  background: white !important;
}
</style>
